<!DOCTYPE html>
<html>
<head>
    <title>Acceleration-Time Graph</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physics-graph" width="500" height="450"></canvas>

    <script>
        const canvas = document.getElementById('physics-graph');
        const ctx = canvas.getContext('2d');

        // --- Configuration ---
        const originX = 70;
        const originY = 370;
        const axisColor = 'black';
        const gridColor = '#aaa';
        const plotColor = 'black';

        const tMax = 50;
        const aMax = 15;
        
        const plotWidth = 350;
        const plotHeight = 300;

        const xScale = plotWidth / tMax; // 350 / 50 = 7
        const yScale = plotHeight / aMax; // 300 / 15 = 20

        // Helper function to map graph coordinates to canvas coordinates
        function mapCoords(t, a) {
            return {
                x: originX + t * xScale,
                y: originY - a * yScale
            };
        }

        // Helper function to draw an arrow on a line
        function drawArrow(ctx, x1, y1, x2, y2) {
            const headlen = 10;
            const angle = Math.atan2(y2 - y1, x2 - x1);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Drawing Functions ---
        function drawAxes() {
            ctx.beginPath();
            ctx.strokeStyle = axisColor;
            ctx.lineWidth = 1.5;

            // X-axis (time)
            drawArrow(ctx, originX, originY, originX + plotWidth + 40, originY);
            // Y-axis (acceleration)
            drawArrow(ctx, originX, originY, originX, originY - plotHeight - 40);

            ctx.stroke();
        }

        function drawLabels() {
            ctx.fillStyle = axisColor;
            ctx.font = '16px Arial';

            // Origin Label
            ctx.textAlign = 'right';
            ctx.textBaseline = 'top';
            ctx.fillText('O', originX - 5, originY + 5);

            // X-axis labels and ticks
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            const tValues = [20, 50];
            tValues.forEach(t => {
                const pos = mapCoords(t, 0);
                ctx.fillText(t, pos.x, pos.y + 8);
            });
            ctx.fillText('t/s', originX + plotWidth + 30, originY + 10);

            // Y-axis labels and ticks
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            const aValues = [10, 15];
            aValues.forEach(a => {
                const pos = mapCoords(0, a);
                ctx.fillText(a, pos.x - 8, pos.y);
            });
            ctx.textAlign = 'center';
            ctx.fillText('a/(m·s⁻²)', originX, originY - plotHeight - 30);
            
            // Caption
            ctx.font = '20px SimSun'; // Using a common Chinese font
            ctx.fillText('习题 1-5 图', canvas.width / 2, canvas.height - 30);
        }

        function drawDashedLines() {
            ctx.beginPath();
            ctx.strokeStyle = gridColor;
            ctx.lineWidth = 1;
            ctx.setLineDash([5, 5]);

            const p1 = mapCoords(20, 10);
            const p2 = mapCoords(50, 15);

            // Lines for (20, 10)
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p1.x, originY);
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(originX, p1.y);

            // Lines for (50, 15)
            ctx.moveTo(p2.x, p2.y);
            ctx.lineTo(p2.x, originY);
            ctx.moveTo(p2.x, p2.y);
            ctx.lineTo(originX, p2.y);
            
            ctx.stroke();
            ctx.setLineDash([]); // Reset to solid line
        }

        function drawPlot() {
            ctx.beginPath();
            ctx.strokeStyle = plotColor;
            ctx.lineWidth = 2;

            const p0 = mapCoords(0, 0);
            const p1 = mapCoords(20, 10);
            const p2 = mapCoords(50, 15);

            ctx.moveTo(p0.x, p0.y);
            ctx.lineTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            
            ctx.stroke();
        }

        // --- Main Drawing Call ---
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawAxes();
            drawDashedLines();
            drawLabels();
            drawPlot();
        }

        draw();
    </script>
</body>
</html>